<template>
  <div class="box">
    <div class="time-top">
      <div class="baby" @click="bianji"><i class="iconfont icon-wode2"></i>编辑</div>
      <div class="baby-photo"><img src="./../../assets/timeNote4.jpg" alt=""></div>
      <div class="baby-names">小萌宝</div>
      <div class="baby-age">30天</div>
    </div>
    <!-- 根据接口获得 -->
    <!-- <div class="time-top" v-for="(item, index) in list" :key="index">
      <div class="baby-photo"><img :src="item.babymedia" alt=""></div>
      <div class="baby-names">{{item.name}}</div>
      <div class="baby-age">{{item.strage}}</div>
    </div> -->
    <div class="time-nav">
      <ul>
        <li @click="photo">云相册</li>
        <li @click="grow">成长记录</li>
        <li @click="achievement">成就</li>
        <li @click="friends">亲友团</li>
      </ul>
    </div>
    <div class="photos">
      <div class="run"><p></p><span class="run-it"></span></div>
      <ul>
        <li>
          <img src="./../../assets/baby1.jpg" alt="">
        </li>
        <li>
          <img src="./../../assets/baby5.jpg" alt="">
        </li>
        <li>
          <img src="./../../assets/baike1.jpg" alt="">
        </li>
        <!-- <li v-for="item in list" :key="item">
          <img :src="item.image">
        </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { PaletteButton } from 'mint-ui'
Vue.component(PaletteButton.name, PaletteButton)

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    axios.post('http://10.8.162.9:8081/byby/selectByUid.do', {
      token: 'McjUBDjSAPiRmii/0a03pV+hf1QUDwYu0FD8RQH7Ao3rjFJwqmLYlkXfIhgZTawXiyZReSxV4j9oeFe60XQUjC6wiY+jPV2cz1R6O0lt+cQ0qqyDNpre3gA1dinsiLPt06OX2vC/h4XuRtQ3cQbg5vZDvkhG7redM0KiX4e9PJdSJyuVyla7ItV9jOHGvHRGHzr7pcJEgd8wmmO4uCamJw==',
      id: 3
    })
      .then((response) => {
        console.log(response.data)
        var data = response.data.list
        this.list = data
        console.log(this.list)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    photo () {
      this.$router.push('/photos')
    },
    grow () {
      this.$router.push('/grow')
    },
    achievement () {
      this.$router.push('/achievement')
    },
    friends () {
      this.$router.push('/friends')
    },
    bianji () {
      this.$router.push('/information')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .time-top {
    width: 3.75rem;
    height: 2.47rem;
    line-height: 0.18rem;
    background-color: rgba(250, 245, 215, 0.747);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0);
    position: relative;
    .baby {
      position: absolute;
      right: 0.05rem;
      top: 0.05rem;
      width: 0.5rem;
      height: auto;
      color: #EF98A9;
      font-size: 0.12rem;
      text-align: center;
      font-family: Microsoft Yahei;
      border: 1px solid rgba(255, 255, 255, 0);
      display: flex;
      flex-direction: column;
      .icon-wode2 {
        color: #EF98A9;
        font-size: 0.18rem;
      }
    }
    .baby-photo {
      position: absolute;
      left: 1.45rem;
      top: 0.5rem;
      width: 0.85rem;
      height: 0.85rem;
      line-height: 0.20rem;
      color: rgba(16, 16, 16, 1);
      font-size: 0.14rem;
      text-align: center;
      font-family: Arial;
      border: 1px solid rgba(255, 255, 255, 0);
      background-color: #fff;
      border-radius: 50%;
      img {
        @include rect(100%, 100%);
        border-radius: 50%;
      }
    }
    .baby-names, .baby-age {
      @include text-color(rgb(161, 132, 138));
      position: absolute;
      left: 0.65rem;
      top: 1.66rem;
      min-width: 0.94rem;
      height: 0.30rem;
      line-height: 0.30rem;
      color: rgba(136, 136, 136, 1);
      font-size: 0.14rem;
      text-align: center;
      font-family: Arial;
      border: 1px solid rgba(255, 255, 255, 0);
      background-color: #fff;
      border-radius: 0.1rem;
    }
    .baby-age {
      position: absolute;
      left: 2.15rem;
      top: 1.66rem;
    }
  }
  .time-nav {
    @include rect(100%, 0.42rem);
    ul {
    @include rect(100%, 0.42rem);
    @include flexbox();
    @include justify-content(space-around);
    @include align-items();
    @include text-color(rgb(105, 74, 81));
    }
  }
  .photos {
    @include rect(100%, 60%);
    overflow: auto;
    .run {
      float: left;
      margin-right: 0.05rem;
      position: fixed;
      left: 0;
      bottom: 0.43rem;
      width: 0.18rem;
      height: 55%;
      border: 1px solid rgba(255, 255, 255, 0);
      p {
        width: 0px;
        height: 100%;
        border: 1px solid rgba(187, 187, 187, 1);
        margin-left: 0.1rem;
      }
      span {
        position: absolute;
        top: 0rem;
        left: 0.01rem;
        display: block;
        @include rect(0.18rem, 0.18rem);
        border-radius: 50%;
        background-color: rgba(242, 242, 242, 1);
      }
    }
    ul {
      float: left;
      margin-left: 0.25rem;
      li {
        width: 3.37rem;
        height: 2.1rem;
        line-height: 0.20rem;
        border-radius: 0.08rem;
        background-color: rgba(242, 242, 242, 1);
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0);
        margin-bottom: 0.18rem;
        img {
          width: 3.37rem;
          height: 2.1rem;
          border-radius: 0.08rem;
        }
      }
    }
  }
</style>
